<template>
  <!-- 所有标签都必须写在一个div中 -->
  <div id="container">
    <el-row>
      <h1>
        <i class="el-icon-s-goods"></i>
        {{sysname}}
      </h1>
    </el-row>

    <el-row>
      <!-- <button onclick="alert(100)">点我</button> -->
      <el-button type="primary" icon="el-icon-search" @click="toadd()">添加</el-button>
    </el-row>

    <el-row>
      <el-table :data="list" style="width: 100%;">
        <!-- header-align:"center" 为头部居中 align:"center" 为内容居中 -->
        <el-table-column prop="title" label="标题" width="280" header-align="center" />
        <el-table-column prop="sellpoint" label="卖点" width="200" header-align="center" />
        <el-table-column prop="price" label="价格" align="right" header-align="center" width="100" />
        <el-table-column prop="intro" label="说明" header-align="center" align="right" />
        <el-table-column label="[操作]" width="220" header-align="center">
          <template slot-scope="s">
            <!-- 两个参数，一个是当前行的索引值，第二个是当前行的数据 -->
            <el-button type="success" @click="toUpdate(s.$index,s.row)" icon="el-icon-check">修改</el-button>
            <el-button type="danger" @click="del(s.$index)" icon="el-icon-close">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--
       控制对话框是否展现 dialogVisible布尔变量true展现 false关闭
      变量需要在数据区声明的
      :visible.sync 属性element-ui检查属性，设置是否展现div，display:none
      v-model双向绑定
    -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title"></el-input>
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.sellpoint"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="m.intro"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click=" dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 这个数据区只允许本组件使用
export default {
  name: "Item",
  data () {
    return {
      sysname: "京淘电商平台",
      dialogVisible: false,
      isUpdate: false,//新增按钮为false，修改按钮为true
      index: 0,//设置全局变量，存储修改按钮的index
      m: {
        // 临时存放一条数据结构 model（pojo）
        title: "",
        sellpoint: "",
        price: 0,
        intro: ""
      },
      list: [{
        title: "大话Java：程序设计从入门到精通",
        sellpoint: "孙卫琴",
        price: 40.0,
        intro: "跟着孙悟空学Java，从此告别枯燥的技术学习。基于JDK9版本讲解Java编程思想、架构、代码管理等，全面了解Java编程的基本技术，32节同步讲解视频课程。"
      },
      {
        title: "Java从入门到精通（第5版）",
        sellpoint: "孙卫琴",
        price: 55.20,
        intro: "297个应用实例+37个典型应用+30小时教学视频+海量开发资源库，丛书累计销量200多万册团购热线010-89113777"
      },
      {
        title: "Java编程思想（第4版） [thinking in java]",
        sellpoint: "Bruce Eckel",
        price: 79.20,
        intro: "Java学习必读经典,殿堂级著作！赢得了全球程序员的广泛赞誉 团购热线010-89113777"
      },
      {
        title: "Java核心技术 卷I 基础知识（原书第11版）",
        sellpoint: "凯•S.霍斯特曼",
        price: 109.30,
        intro: "CoreJava第11版，Jolt大奖获奖作品，与Java编程思想、EffectiveJava、深入理解Java虚拟机堪称：Java四大名著"
      },
      {
        title: "Spring Cloud Alibaba微服务原理与实战",
        sellpoint: "谭锋",
        price: 83.60,
        intro: "SpringCloudAlibba首著/12年Java开发及架构经验总结/微服务架构与分布式系统必备团购热线010-89113777"
      },
      ]

    }
  },
  methods: {
    toadd: function () {
      // 防止数据已经有值，干扰，清空数据
      this.m = {};
      // 展现对话框,要调用数据区域的数据必须加this关键字
      this.dialogVisible = true;
      this.isUpdate = false;
    },
    save: function () {
      // 这个方法服用，新增和修改都使用它
      // 在list数组中新增元素 
      // this.list.splice(0, 0, this.m);
      if (!this.isUpdate) { //是修改
        // 在修改按钮中通过插槽传入index，可以设置一个全局变量来记录这个值
        this.list.splice(this.index, 1, this.m);
      } else {
        this.list.splice(0, 0, this.m);
      }
      this.dialogVisible = false;
      // this.m = {};//修改完成后清空数据
    },
    del: function (index) {
      // console.log(index);
      // 通过插槽vue+element-ui提供，它就把index索引值传递过来
      // 删除指定数组的索引值，删除一个
      this.list.splice(index, 1);
    },
    toUpdate: function (index, row) {
      // console.log(index);
      // console.log(row);
      // 获取当前数据，回显，对话框中数据form表单，表单时和m绑定
      // 1、数据区index变量 2、修改按钮设置index 3、在这获取数据区index
      // this.m = row;//row和m是统一引用，一个改全都改，解决办法，把他们关系取消，不是同一个引用
      // JSON
      this.m = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
      this.index = index;//前面是全局变量，后面是形参
    }
  },
}
</script>
<style scoped>
/* 字体不一样，是element-ui自己的问题，手工设置微软雅黑字体 */
textarea {
  font-family: "微软雅黑", "arial";
}
</style>